<template>
    <div>
        <el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键词">
                <el-input v-model="formInline.keywords" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="Add">添加菜单</el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="menuId" border default-expand-all
            :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
            <el-table-column prop="menuName" label="菜单名称" sortable width="180">
            </el-table-column>
            <el-table-column prop="menuType" label="菜单类型" sortable width="180">
                <template slot-scope="scope">
                    {{test(scope)}}
                </template>
            </el-table-column>
            <el-table-column prop="menuRoute" label="菜单路由" sortable width="180">
            </el-table-column>
            <el-table-column prop="menuAPI" label="接口URL" sortable width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" sortable width="180" :formatter="formatter">
            </el-table-column>
            <el-table-column prop="createName" label="创建人" sortable width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加菜单" width="50%" :visible.sync="dialogFormVisibleAdd">
            <menu-add ref="menuAdd" :menuType="menuType" @Save="SaveSuccess"></menu-add>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
                <el-button type="primary" @click="Save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { GetTreeNodes } from '@/api/menu';
    import MenuAdd from './MenuAdd';
    import moment from 'moment'
    export default {
        name: 'RbacProjectUiList',
        components: {
            MenuAdd
        },
        data() {
            return {
                tableData: [],
                menuType: [{
                    id: 1,
                    name: "目录"
                }, {
                    id: 2,
                    name: "菜单"
                }, {
                    id: 3,
                    name: "按钮"
                }],
                formInline: {
                    keywords: '',
                    startTime: '',
                    endTime: ''
                },
                dialogFormVisibleAdd: false,
            };
        },

        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                GetTreeNodes().then(m => {
                    this.tableData = m.data;
                });
            },
            test(scope) {
                return this.menuType.find(m => m.id == scope.row.menuType).name;
            },
            formatter(row, column, cellValue, index) {
                return moment(cellValue).format("YYYY-MM-DD kk:mm:SS")
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            Add() {
                this.dialogFormVisibleAdd = true;
            },
            SaveSuccess() {
                this.loadData();
                this.dialogFormVisibleAdd = false;
            },
            onSubmit() {

            },
            Save() {
                this.$refs.menuAdd.SaveAdd();
            }
        },
    };
</script>